<template>
  <div
    :style="{
      display: 'flex',
      width: 'calc(100% - ' + verticalTheme.headerRight + 'px)',
    }"
  >
    <div
      :style="{
        width: verticalTheme.headerLeft + 'px',
      }"
    >
      <Logo />
    </div>

    <div
      :style="{
        display: 'flex',
        alignItems: 'center',
        width: 'calc(100% - ' + verticalTheme.headerLeft + 'px)',
      }"
    >
      <MenuList />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Logo from "@/components//logo/Index.vue";
import MenuList from "@/components//menu/Index.vue";
import { useThemeStore } from "@/stores/models/theme";

const themeStore = useThemeStore();
const verticalTheme = themeStore.verticalTheme;
onMounted(() => {});
</script>
<style scoped lang='scss'>
</style>